<template>
  <div>

    <div class="card" style="margin-bottom: 5px;">
      <el-input style="width: 260px" v-model="data.name" placeholder="请输入名称查询" :prefix-icon="Search"></el-input>
      <el-button style="margin-left: 5px" type="primary">查 询</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px;">

      <el-button style="margin-left: 5px" type="danger">批量删除</el-button>
      <el-button style="margin-left: 5px" type="primary">新增</el-button>
      <el-button style="margin-left: 5px" type="success">批量导入</el-button>
      <el-button style="margin-left: 5px" type="info">批量导出</el-button>
    </div>


    <div class="card" style="margin-bottom: 5px;">
      <el-table :data="data.tableData" style="width: 100%;" :header-cell-style="{ fontWeight: 'bold', color:'#333', backgroundColor: '#d3f3f3' }">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="username" label="账号" width = 200% />
        <el-table-column prop="name" label="名称" width = 150% />
        <el-table-column prop="phone" label="电话" width = 200% />
        <el-table-column prop="email" label="邮箱" width = 200% />
      </el-table>
    </div>

    <div class="card" style="margin-bottom: 5px;">
      <div class="demonstration">Total item count</div>
      <el-pagination
          v-model:current-page="data.pageNum"
          v-model:page-size="data.pageSize"
          layout="total, prev, pager, next, sizes, jumper"
          :page-sizes="[5, 10, 15, 20]"
          :total="data.total"
          @current-change="load"
          @size-change="load"

      />
    </div>
  </div>


</template>

<script setup>
import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";
import request from "@/utils/request.js";
import {ElMessage} from "element-plus";


const data = reactive({
  name:null,
  pageNum: 1,
  pageSize: 5,
  total: 6,
  tableData:[
  ]
})

const load = () => {
  request.get('admin/selectPage',{
    params:{
      pageNum: data.pageNum,
      pageSize: data.pageSize
    }
  }).then(res => {
    data.tableData = res.data.list;
    data.total=res.data.total;
  })
}
load()

</script>
